<template>
	<view class="bs px-3">
		<!-- 顶部状态栏和导航栏区域 -->
		<statusBar :height="'80rpx'" :bgColor="'#424242'">
			<view class="flex justify-between align-center px-4 text-white" style="height: 80rpx;border-bottom: 1px solid #535353;">
				<view @tap="backToPrePage" class="iconfont icon-fanhui flex align-center" style="width: 40rpx;height: 40rpx;"></view>
				<view class="font">裁剪封面</view>
				<view class="text-main" @tap="complete">完成</view>
			</view>
		</statusBar>
		
		<!-- 图片区域 -->
		<!-- 842rpx仅适配ios端，如果要适配其他端可以做进一步优化 -->
		<image :src="imgPath" mode="widthFix" class="bg-white" style="margin-top: 180rpx;width: 690rpx;margin-bottom: 842rpx;"></image>
		
		<!-- 双指缩放功能暂时搁置 -->
		<!-- <movable-area>
			<movable-view scale="true">
				<image :src="imgPath" mode="widthFix" class="bg-white" style="margin-top: 180rpx;width: 690rpx;margin-bottom: 842rpx;"></image>
			</movable-view>
		</movable-area> -->
		
		<!-- 镂空区域的父元素 -->
		<view style="position: fixed;width:690rpx;top: 0;left: 30rpx;right: 0;">
			<!-- 状态栏占位，用于适配镂空区域到顶部的高度 -->
			<statusBar :height="'80rpx'"></statusBar>
			<!-- 镂空区域 -->
			<!-- 有关box-shadow属性的用法参见 https://www.html.cn/archives/9360 -->
			<!-- 有关镂空区域的实现可以参考 https://blog.csdn.net/xjun0812/article/details/51207177?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-7.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-7.control -->
			<view canvas-id="myCanvas" class="position-relative" style="width: 690rpx; height: 430rpx;margin-top: 180rpx;box-shadow: rgba(0,0,0,.6) 0 0 0 1366px;">
				<!-- 裁剪边框样式 -->
				<!-- 内部灰色边框线 -->
				<view class="position-absolute" style="top: 2rpx;left: 2rpx;right: 2rpx;bottom: 2rpx; border: 4rpx solid rgba(255,255,255,0.5);"></view>

				<view class="flex position-absolute " style="width: 34rpx;height: 34rpx;">
					<view style="width: 8rpx;height: 34rpx;background-color: #FDFDFD;"></view>
					<view style="width: 26rpx;height: 8rpx;background-color: #FDFDFD;"></view>
				</view>
				
				<view class="flex position-absolute right-0" style="width: 34rpx;height: 34rpx;">
					<view style="width: 26rpx;height: 8rpx;background-color: #FDFDFD;"></view>
					<view style="width: 8rpx;height: 34rpx;background-color: #FDFDFD;"></view>
				</view>
				
				<view class="position-absolute bottom-0" style="width: 34rpx;height: 34rpx;">
					<view style="width: 8rpx;height: 26rpx;background-color: #FDFDFD;"></view>
					<view style="width: 34rpx;height: 8rpx;background-color: #FDFDFD;"></view>
				</view>
				
				<view class="position-absolute bottom-0 right-0" style="width: 34rpx;height: 34rpx;">
					<view class="ml-auto" style="width: 8rpx;height: 26rpx;background-color: #FDFDFD;"></view>
					<view style="width: 34rpx;height: 8rpx;background-color: #FDFDFD;"></view>
				</view>
			</view>
		</view>
		
		<!-- 检验裁剪效果 -->
		<!-- <image :src="cutImg" mode="widthFix" class="bg-white" style="width:690rpx;height: 430rpx; margin-top: 100rpx;">
		</image>
		<text class="text-white">{{cutImg}}</text> -->
		
		<!-- 将原始图片按比例画在画布上 -->
		<!-- position:fixed;top:-9999px;作用是将画布顶出视窗 -->
		<canvas :style="'position:fixed;top:-9999px;width: 690rpx;height: '+ 690/imgRatio + 'rpx;'" canvas-id="myCanvas"></canvas>
	</view>
</template>

<script>
	import statusBar from '@/components/common/statusBar.vue'
	let sysInfo = uni.getSystemInfoSync()
	let SCREEN_WIDTH = sysInfo.screenWidth
	export default {
		components:{
			statusBar
		},
		data() {
			return {
				imgPath:'',
				// 图片到底部距离
				bottom:0,
				// 裁剪完成后的图片路径
				cutImg:'',
				// 距离页面顶部的距离
				scrollTop:0,
				// 原始图片的宽高比
				imgRatio:0
			}
		},
		methods: {
			backToPrePage() {
				// 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。
				uni.navigateBack({
					// 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
					delta:1
				})
			},
			// 点击完成按钮后触发的函数
			complete(){
				let _this = this
				// 创建一个画布实例
				const ctx = uni.createCanvasContext('myCanvas')
				// 参考网址：https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
				// 根据原始图片路径将原始图片画在画布上。这里使用的写法是：drawImage(imageResource, dx, dy, dWidth, dHeight)
				// dx：原始图片的左上角在目标 canvas 上 x 轴的位置
				// dy: 原始图片的左上角在目标 canvas 上 y 轴的位置
				// dWidth：将原始图片的宽缩放为dWidth
				// dHeight：将原始图片的宽缩放为dHeight
				
				// Math.floor保证裁剪宽度不超过实际宽度，且裁剪高度不超过实际高度
				let imgW = Math.floor(SCREEN_WIDTH / 750 * 690)
				let imgH = Math.floor(imgW / _this.imgRatio)
				ctx.drawImage(_this.imgPath, 0, 0, imgW, imgH)
				// 裁剪框高度（px单位）
				let cutHeight = SCREEN_WIDTH / 750 * 430
				// 如果裁剪框超出了图片底部，则改变裁剪图片的高度
				let imgHeight = _this.scrollTop + cutHeight > imgH ? imgH - _this.scrollTop : cutHeight
				ctx.draw(true, () => {
					uni.canvasToTempFilePath({
						x: 0,
						y: _this.scrollTop,
						width: imgW,
						height: imgHeight,
						destWidth: imgW,
						destHeight: imgHeight,
						// 图片的质量
						// quality: 1,
						canvasId: 'myCanvas',
						success: function (res) {
							// 记录裁剪后的图片的临时路径
							_this.cutImg=res.tempFilePath
							
							// 图片的临时路径写入全局变量
							uni.setStorageSync('cutImgPath', res.tempFilePath)
							_this.backToPrePage()
						}
					})
				})
			}
		},
		// 获取上一个页面传递过来的图片路径
		onLoad() {
			this.imgPath=uni.getStorageSync('tempFilePaths')
			
			let _this = this
			
			// 根据图片路径获取原始图片的信息
			uni.getImageInfo({
				// 图片原始路径
				src: _this.imgPath,
				success: function success(res) {
					// 求出原始图片的宽高比
					_this.imgRatio = res.width / res.height
				},
			})
		},
		// 监听页面滚动事件
		onPageScroll(res){
			// 获取距离页面顶部距离，用于处理裁剪图片的位置
			this.scrollTop=res.scrollTop
		},
	}
</script>

<style>
	/* 页面背景色 */
	page {
		background-color: #424242!important;
	}
</style>